<template>
	<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" @down="downCallback">
		<view class="container recharge-order">
			<u-time-line>
				<u-time-line-item nodeTop="2" v-for="(item, index) in list" :key="index">
					<!-- 此处自定义了左边内容，用一个图标替代 -->
					<template v-slot:node>
						<view class="vip-logo" :class="{ disable: item.vip_status.value < 2 }">
							<image class="vip-logo-image" :src="item.orderPlan.logo.file_path" mode="aspectFit"></image>
							<view class="vip-logo-status">{{ item.vip_status.text }}</view>
						</view>
					</template>
					<template v-slot:content>
						<view :class="{ disable: item.vip_status.value < 2 }">
							<view class="u-order-title">{{ item.orderPlan.plan_name }}</view>
							<view class="u-order-desc">{{ item.orderPlan.remark }}</view>
							<view class="vip-time">{{ item.vip_start }} 到 {{ item.vip_end }}</view>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
		</view>
		<!--
			<view v-for="(item, index) in list" :key="index" class="order-item dis-flex flex-x-between flex-y-center">
				<view class="item-left flex-box">
					<view class="rec-status">
						<text>{{ item.describe }}</text>
					</view>
					<view class="rec-time">
						<text>{{ item.create_time }}</text>
					</view>
				</view>
			</view>
		 -->
	</mescroll-body>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
export default {
	mixins: [MescrollMixin],
	data() {
		return {
			list: [] // 充值记录
		};
	},
	onLoad() {},
	onShow() {},
	methods: {
		/**
		 * 获取积分明细列表
		 */
		upCallback(mescroll) {
			this.$u.api
				.getVipOrder(mescroll.num)
				.then(res => {
					let resList = res.data.list;
					if (mescroll.num == 1) {
						this.list = resList.data;
					} else {
						this.list.push(...resList.data);
					}
					this.mescroll.endBySize(resList.data.length, res.data.total);
				})
				.catch(e => {
					this.mescroll.endErr();
				});
		}
	}
};
</script>

<style lang="scss">
page,
.container {
	background: #fff;
}

.recharge-order {
	padding: 0 50rpx 0 70rpx;
}

.order-item {
	font-size: 28rpx;
	padding: 20rpx 20rpx;
	line-height: 1.8;
	border-bottom: 1rpx solid rgb(238, 238, 238);
}

.rec-status {
	color: #333;
}

.order-item .rec-time {
	color: rgb(160, 160, 160);
	font-size: 26rpx;
}

.vip-logo {
	width: 100rpx;
	background-color: #fff;
	.vip-logo-image {
		width: 100rpx;
		height: 100rpx;
	}
	.vip-logo-status {
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
	}
	.vip-logo-text {
		line-height: 50rpx;
	}
}

.u-node {
	width: 44rpx;
	height: 44rpx;
	border-radius: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #d0d0d0;
}

.u-order-title {
	height: 70rpx;
	color: #333333;
	display: flex;
	align-items: center;
	font-weight: bold;
	font-size: 32rpx;
	padding-left: 40rpx;
	color: $theme-main-color;
}

.u-order-desc {
	color: rgb(150, 150, 150);
	font-size: 24rpx;
	padding-left: 40rpx;
	min-height: 100rpx;
}

.vip-time {
	color: #999;
	font-size: 25rpx;
	padding-left: 40rpx;
}
.disable {
	filter: grayscale(100%);
}
</style>
